


const acquire = async function () {
    //请求 学生数据
    const stuInf = await axios({
        url: "/student/list",
    })
    //线型图的数据 
    const names = stuInf.data.data.map(i => i.name)//名字
    const salarys = stuInf.data.data.map(i => i.salary)//期望薪资
    const truesalary = stuInf.data.data.map(i => i.truesalary)//实际薪资

    //饼图的数据
    const pieData = []
    //循环遍历 循环出我们想要的数据
    stuInf.data.data.forEach(item => {
        //声明变量 index 判断饼图数据 pieData 中是否有匹配的省份，有输出 0 没有 输出 -1
        const index = pieData.findIndex(v => v.name === item.province)
        if (index === -1) {//判断，如果没有
            pieData.push({ value: 1, name: item.province })
        } else {//如果有，value 自身加1
            pieData[index].value++
        }
    });

    //折线图函数执行
    lineChart(names, salarys, truesalary)
    //饼图执行
    pieChart(pieData)
}

//封装折线图函数
const lineChart = (name, salarys, truesalary) => {

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.line'));

    option = {
        //标题
        title: {
            text: '棒棒学生图'
        },
        // 上方小圆点
        legend: {},

        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: name,//名字
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
        },

        //下拉框
        dataZoom: [
            {
                start: 0,//下拉线条框起始位置
                end: 20//下拉线条框起始位置
            }
        ],
        //线
        series: [
            {
                name: '理想薪资',//薪资名字
                type: 'line',//线条出现
                data: salarys,//形参
                smooth: true,   //光滑线

                // 最高点 最底点
                // markPoint: {
                // data: [
                // { type: 'max', name: 'Max' },
                // { type: 'min', name: 'Min' }
                // ]
                // },
                //中点标记线
                // markLine: {
                //     data: [{ type: 'average', name: 'Avg' }]
                // }
            },
            {
                name: '实际薪资',//薪资名字
                type: 'line',//线条出现
                data: truesalary,//形参
                smooth: true,     //光滑线
            }

        ]

    };
    //显示折线图
    myChart.setOption(option);
}

//封装饼图函数
const pieChart = (data) => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.pie'));

    option = {
        //标题
        title: {
            text: '棒棒学生饼饼图'
        },
        legend: {
            top: 'bottom'
        },

        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',//
                radius: [20, 120],//半径
                center: ['50%', '50%'],//居中
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                //内容
                data
            }
        ]
    };

    //显示折线图
    myChart.setOption(option);
}

acquire()